<template>
  <div class="demand-waper">
    <div class="demand-waper title">
      <img src="../../assets/images/binzhou/title-three.png" alt="" />
    </div>
    <div class="step-list">
      <div class="step-item">
        <div class="img">
          <img src="../../assets/images/binzhou/demand-step1.png" alt="" />
        </div>
        <div class="article">
          <p>待审批</p>
          <count-to class="count-to" :end-val="list.approvedNum" :delay="delay"></count-to>
        </div>
      </div>
      <div class="step-item">
        <div class="img">
          <img src="../../assets/images/binzhou/demand-step2.png" alt="" />
        </div>
        <div class="article">
          <p>待发布</p>
          <count-to
            class="count-to step-color-two"
            :end-val="list.releasedNum"
            :delay="delay"
          ></count-to>
        </div>
      </div>
      <div class="step-item">
        <div class="img">
          <img src="../../assets/images/binzhou/demand-step3.png" alt="" />
        </div>
        <div class="article">
          <p>待上线</p>
          <count-to
            class="count-to step-color-three"
            :end-val="list.launchedNum"
            :delay="delay"
          ></count-to>
        </div>
      </div>
    </div>
    <div>
      <trapezoid :info="list"></trapezoid>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { nextTick, onMounted, ref, watch, reactive } from 'vue'
  import * as echarts from 'echarts'
  import trapezoid from '@/components/Binzhou/trapezoid.vue'
  import { CountTo } from 'vue3-count-to'

  const props = defineProps({
    list: {
      type: Object,
      default: () => ({})
    }
  })

  const delay = ref<number>(2000)

  const renderChart = () => {
    const list = reactive(props.list.data)
  }

  watch(
    props,
    () => {
      renderChart()
    },
    {
      deep: true
    }
  )
  onMounted(() => {
    nextTick(() => {
      renderChart()
    })
  })
</script>
<style lang="scss" scoped>
  .demand-waper {
    width: 390px;
    height: 324px;
    .title {
      width: 359px;
      height: 42px;
      background-image: url('@/assets/images/binzhou/icon-three.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      margin-bottom: 22px;
      padding-top: 14px;
      padding-left: 19px;
      img {
        display: inline-block;
        width: 78px;
        height: 16px;
      }
    }
    .step-list {
      width: 360px;
      margin: 34px 7px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .step-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img {
          img {
            width: 33px;
            height: 36px;
          }
        }
        .article {
          margin-left: 11px;
          p {
            font-size: 14px;
            font-family: Microsoft YaHei;
            color: #ffffff;
          }
          .count-to,
          span {
            display: inline-block;
            font-size: 18px;
            font-family: DIN;
            font-weight: bold;
            color: #00ffe3;
          }
        }
      }
    }
  }
  .step-color-two {
    color: #ddc22c !important;
  }
  .step-color-three {
    color: #38d3ff !important;
  }
</style>
